<template>
  <a-layout class="admin-layout" :style="{zoom: pageScale}">
    <layout-header
      class="layout-header"
      :class="{ 'work-header': workPlace }"
    ></layout-header>
    <a-layout class="layout-container">
      <layout-sider></layout-sider>
      <a-layout-content
        class="layout-container-content"
        :class="{ 'work-content': workPlace }"
      >
        <div class="breadcrumb-container">
          <a-breadcrumb separator=">">
            <a-breadcrumb-item
              v-for="item in $route.matched"
              :key="item.name"
              >{{ item.meta.title }}</a-breadcrumb-item
            >
          </a-breadcrumb>
        </div>
        <div class="container">
          <router-view />
        </div>
      </a-layout-content>
    </a-layout>
<!--    <a-layout-footer class="layout-footer"></a-layout-footer>-->
  </a-layout>
</template>

<script>
import LayoutHeader from "@/components/layoutHeader";
import LayoutSider from "@/components/layout-sider";
import store from "@/store";
export default {
  name: "adminLayout",
  components: { LayoutHeader, LayoutSider },
  data() {
    return {
      workPlace: false,
      pageScale: 1,
      pageOffset: 0,
    };
  },
  methods: {
    //屏幕自适应
    autoSize() {
      let size = 'default'
      if (window.innerWidth >= 1500) {
        size = 'large'
      } else if (window.innerWidth < 1500) {
        size = 'default'
      } else if (window.innerWidth < 1200) {
        size = 'small'
      }
      store.commit('SET_SIZE', size)
    },
    resetPage() {
      this.pageScale = 1
      this.pageOffset = 0
      document.getElementById('app').style.height = `auto`
      // document.getElementById('app').style.backgroundColor = 'transparent'
      // document.getElementsByTagName('html')[0].style.backgroundColor = 'transparent'
    },
  },
  mounted() {
    let path = this.$route.path;
    if (path === "/workCenter/workplace") {
      this.workPlace = true;
    }

    this.autoSize()
    window.addEventListener('resize', this.autoSize)
  },
};
</script>

<style scoped lang="less">
.admin-layout {
  position: relative;
  //width: 1920px;
  //height: 1080px;
  height: 100%;
  background: #202949;
  //transform-origin: left top;
  .layout-header {
    color: #fff;
    &.work-header {
      background: #202949 !important;
    }
  }
  ::v-deep .ant-layout-header {
    padding: 0px;
  }

  .layout-container {
    background-color: transparent;

    .layout-container-content {
      //padding-bottom: 48px;
      background: #edeff8;
      .breadcrumb-container {
        //padding: 5px 20px;
      }
      &.work-content {
        background: transparent;
        ::v-deep .ant-breadcrumb-link {
          color: #77eaff;
        }
        ::v-deep .ant-breadcrumb-separator {
          color: #77eaff;
        }
      }
      .container {
        height: calc(100% - 31px);
        //padding: 20px 20px 0 20px;
      }
    }
  }
  .layout-footer {
    margin: 0 130px;
    position: fixed;
    bottom: 0;
    width: calc(100% - 260px);
    padding: 0;

    background-color: transparent;
    z-index: 9;
  }
}
</style>
